<template>
  <div>
    <el-table
      border
      :data="tableData"
      :row-class-name="getRowClass"
      style="width: 100%"
      tooltip-effect="dark"
    >
      >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="width: 95%; margin-left: 5%">
            <el-table
              ref="multipleTable"
              :data="props.row.order_item"
              row-key="id"
            >
              >
              <el-table-column label="商品名称" prop="goods_name" />
              <el-table-column label="剩余/总课时" prop="card_info" />
              <el-table-column label="数量" prop="item_qty" />
              <el-table-column label="客单价" prop="price" />
              <el-table-column label="商品单价" prop="item_price" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="order_sn" />
      <el-table-column label="下单时间" prop="created_at" />
      <el-table-column label="订单金额" prop="pay_amount" />
    </el-table>
  </div>
</template>

<script>
  //
  import { cumulativeOrder } from '@/api/customer'

  export default {
    components: {},
    props: {
      cusid: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        tableData: [],

        value: '全部',
      }
    },
    watch: {},

    mounted() {
      this.init()
    },
    methods: {
      getRowClass(row) {
        // children 是你子项的数组 key
        if (row.row.order_item.length === 0) {
          // 公共css 样式里的
          return 'row-expand-cover'
        }
      },
      init() {
        const data = {
          cus_id: this.cusid,
        }
        cumulativeOrder(data).then((e) => {
          this.tableData = e.data.data
        })
      },
    },
  }
</script>

<style></style>
